<!doctype html>
<html xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset='utf-8'>
  <title>Array, object and function data sources - Handsontable</title>

  <!--
  Loading Handsontable (full distribution that includes all dependencies apart from jQuery)
  -->
  <script data-jsfiddle="common" src="../lib/jquery.min.js"></script>
  <script data-jsfiddle="common" src="../dist/jquery.handsontable.full.js"></script>
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="../dist/jquery.handsontable.full.css">

  <!--
  Loading demo dependencies. They are used here only to enhance the examples on this page
  -->
  <link data-jsfiddle="common" rel="stylesheet" media="screen" href="css/samples.css?20140331">
  <script src="js/samples.js"></script>
  <script src="js/highlight/highlight.pack.js"></script>
  <link rel="stylesheet" media="screen" href="js/highlight/styles/github.css">
  <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

  <!--
  Facebook open graph. Don't copy this to your project :)
  -->
  <meta property="og:title" content="Array, object and function">
  <meta property="og:description"
        content="This page shows how to use Handsontable with various data sources: array, object and function.">
  <meta property="og:url" content="http://handsontable.com/demo/reference.html">
  <meta property="og:image" content="http://handsontable.com/demo/image/og-image.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="409">
  <meta property="og:image:height" content="164">
  <link rel="canonical" href="http://handsontable.com/demo/reference.html">

  <!--
  Google Analytics for GitHub Page. Don't copy this to your project :)
  -->
  <script src="js/ga.js"></script>
</head>

<body>


<div class="wrapper">
<div class="wrapper-row">
<div id="global-menu-clone">
  <h1><a href="../index.html">Handsontable</a></h1>

</div>

<div id="container">
<div class="columnLayout">

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad">
      <h2>Array, object and function data sources</h2>

      <p>This page shows how to use Handsontable with various data sources:</p>

      <ul>
        <li><a href="#array">array data source</a></li>
        <li><a href="#array-hidden">array data source (with hidden columns)</a></li>
        <li><a href="#object">object data source</a></li>
        <li><a href="#nested">object data source (nested, with column mapping)</a></li>
        <li><a href="#dataschema">object data source (custom data schema)</a></li>
        <li><a href="#propertyschema">function data source and schema (to reach where arrays and objects can't
          reach)</a></li>
      </ul>

      <p>Please take note that Handsontable will change the original data source. More about this here: <a
        href="understanding_reference.html">Understanding binding as reference</a>.</p>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example1">
      <a name="array"></a>

      <h2>Array data source</h2>

      <p>Most of the people use <strong>array of arrays</strong> data source with Handsontable.</p>

      <div id="example1"></div>

      <p>
        <button name="dump" data-dump="#example1" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example1">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example1">
        var data = [
          ["", "Kia", "Nissan", "Toyota", "Honda"],
          ["2008", 10, 11, 12, 13],
          ["2009", 20, 11, 14, 13],
          ["2010", 30, 15, 12, 13]
        ];

        var $container = $("#example1");
        $container.handsontable({
          data: data,
          startRows: 5,
          startCols: 5,
          colHeaders: true,
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example2">
      <a name="array-hidden"></a>

      <h2>Array data source (with hidden columns)</h2>

      <p>Let's say, you want the same data source, but without the <b>Kia</b> column.</p>

      <div id="example2"></div>

      <p>
        <button name="dump" data-dump="#example2" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example2">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example2">
        var hiddenData = [
          ["", "Kia", "Nissan", "Toyota", "Honda"],
          ["2008", 10, 11, 12, 13],
          ["2009", 20, 11, 14, 13],
          ["2010", 30, 15, 12, 13]
        ];

        var $container = $("#example2");
        $container.handsontable({
          data: hiddenData,
          startRows: 5,
          startCols: 5,
          colHeaders: true,
          columns: [
            {data: 0},
            {data: 2},
            {data: 3},
            {data: 4}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example3">
      <a name="object"></a>

      <h2>Object data source</h2>

      <p>With version 0.7.0, comes possibility to use <strong>array of objects</strong> data source.</p>

      <div id="example3"></div>

      <p>
        <button name="dump" data-dump="#example3">Dump to console</button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example3">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example3">
        var objectData = [
          {id: 1, name: "Ted Right", address: ""},
          {id: 2, name: "Frank Honest", address: ""},
          {id: 3, name: "Joan Well", address: ""}
        ];

        var $container = $("#example3");
        $container.handsontable({
          data: objectData,
          startRows: 5,
          startCols: 3,
          colHeaders: true,
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example4">
      <a name="nested"></a>

      <h2>Object data source (nested, with column mapping)</h2>

      <p>Some people have nested objects. They can also be used at the data source with a little bit of column
        mapping.</p>

      <p>The mapping is done using the <b>columns</b> option.</p>

      <div id="example4"></div>

      <p>
        <button name="dump" data-dump="#example4" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example4">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example4">
        var nestedObjects = [
          {id: 1, name: {first: "Ted", last: "Right"}, address: ""},
          {id: 2, address: ""}, //HOT will create missing properties on demand
          {id: 3, name: {first: "Joan", last: "Well"}, address: ""}
        ];

        var $container = $("#example4");
        $container.handsontable({
          data: nestedObjects,
          startRows: 5,
          startCols: 4,
          colHeaders: true,
          columns: [
            {data: "id"},
            {data: "name.first"},
            {data: "name.last"},
            {data: "address"}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example5">
      <a name="dataschema"></a>

      <h2>Object data source (custom data schema)</h2>

      <p>When you use object data binding, Handsontable needs to know the data structure to create when you add a new
        row.</p>

      <p>If your data source contains at least one row, Handsontable will figure out the data structure based on the
        first row.</p>

      <p>In case you want to start with an empty data source, you will need to provide the <strong>dataSchema</strong>
        option that contains the data structure for any new row added to the grid.</p>

      <p>The below example shows custom data schema with an empty data source:</p>

      <div id="example5"></div>

      <p>
        <button name="dump" data-dump="#example5" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example5">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example5">
        var $container = $("#example5");
        $container.handsontable({
          data: [],
          dataSchema: {id: null, name: {first: null, last: null}, address: null},
          startRows: 5,
          startCols: 4,
          colHeaders: ['ID', 'First Name', 'Last Name', 'Address'],
          columns: [
            {data: "id"},
            {data: "name.first"},
            {data: "name.last"},
            {data: "address"}
          ],
          minSpareRows: 1
        });
      </script>
    </div>
  </div>
</div>

<div class="rowLayout">
  <div class="descLayout">
    <div class="pad" data-jsfiddle="example6">
      <a name="propertyschema"></a>

      <h2>Function data source and schema (to reach where arrays and objects can't reach)</h2>

      <p>
        If your <strong>dataSchema</strong> is actually a constructor of an
        object that doesn't directly expose its members, like a Backbone.js
        model, you can specify functions for the <strong>data</strong> member
        of each <strong>columns</strong> item.
      </p>

      <p>The below example shows a small example of using such objects:</p>

      <div id="example6"></div>

      <p>
        <button name="dump" data-dump="#example6" title="Prints current data source to Firebug/Chrome Dev Tools">Dump
          data to console
        </button>
      </p>
    </div>
  </div>

  <div class="codeLayout">
    <div class="pad">
      <div class="jsFiddle">
        <button class="jsFiddleLink" data-runfiddle="example6">Edit in jsFiddle</button>
      </div>

      <script data-jsfiddle="example6">

        var $container = $("#example6");
        $container.handsontable({
          data: [
            model({id: 1, name: "Ted Right", address: ""}),
            model({id: 2, name: "Frank Honest", address: ""}),
            model({id: 3, name: "Joan Well", address: ""})
          ],
          dataSchema: model,
          startRows: 5,
          startCols: 3,
          colHeaders: ['ID', 'Name', 'Address'],
          columns: [
            {data: property("id")},
            {data: property("name")},
            {data: property("address")}
          ],
          minSpareRows: 1
        });

        function model(opts) {
          var _pub = {},
            _priv = $.extend({
              id: undefined,
              name: undefined,
              address: undefined
            }, opts);

          _pub.attr = function (attr, val) {
            if (typeof val === 'undefined') {
              window.console && console.log("\t\tGET the", attr, "value of", _pub);
              return _priv[attr];
            }
            window.console && console.log("SET the", attr, "value of", _pub);
            _priv[attr] = val;

            return _pub;
          };

          return _pub;
        }

        function property(attr) {
          return function (row, value) {
            return row.attr(attr, value);
          }
        }
      </script>
    </div>
  </div>
</div>

<div class="footer-text">Handsontable &copy; 2012-2014 Marcin Warpechowski and contributors.<br> Code and documentation
  licensed under the The MIT License.
</div>
</div>

</div>

</div>
</div>

<div id="outside-links-wrapper"></div>

</body>
</html>